<template>
  <div class="home" style="padding-bottom: 100px">
    <div class="top-box">
      <div class="top">
        <div class="title" @click="$router.push('/search')">
          <van-icon name="search" size="18" />
          <span> 搜索 </span>
        </div>
      </div>
    </div>

    <div class="main">
      <van-tabs v-model="active" @click="switchTab">
        <van-tab v-for="item in List" :key="item._id" :title="item.name">
          <div class="article">
            <ul>
              <!-- <router-link :to="{path:'/details',query:{cate_id:item.author_id}}"></router-link> -->
              <!-- <li v-for="item in Article" @click="detail" :key="item._id"> -->
              <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <template #loading>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    style="
                      margin: auto;
                      background: rgba(255, 255, 255, 0);
                      display: block;
                    "
                    width="57px"
                    height="57px"
                    viewBox="0 0 100 100"
                    preserveAspectRatio="xMidYMid"
                  >
                    <g>
                      <g transform="translate(50 50)">
                        <g transform="scale(0.6)">
                          <g transform="translate(-50 -58)">
                            <path
                              fill="#f47e60"
                              d="M27.1,79.4c-1.1,0.6-2.4,1-3.7,1c-2.6,0-5.1-1.4-6.4-3.7c-2-3.5-0.8-8,2.7-10.1c1.1-0.6,2.4-1,3.7-1c2.6,0,5.1,1.4,6.4,3.7 C31.8,72.9,30.6,77.4,27.1,79.4z"
                            ></path>
                            <path
                              fill="#f8b26a"
                              d="M72.9,79.4c1.1,0.6,2.4,1,3.7,1c2.6,0,5.1-1.4,6.4-3.7c2-3.5,0.8-8-2.7-10.1c-1.1-0.6-2.4-1-3.7-1c-2.6,0-5.1,1.4-6.4,3.7 C68.2,72.9,69.4,77.4,72.9,79.4z"
                            ></path>
                            <circle
                              fill="#abbd81"
                              cx="50"
                              cy="27"
                              r="7.4"
                            ></circle>
                            <path
                              fill="#8ebfc7"
                              d="M86.5,57.5c-3.1-1.9-6.4-2.8-9.8-2.8c-0.5,0-0.9,0-1.4,0c-0.4,0-0.8,0-1.1,0c-2.1,0-4.2-0.4-6.2-1.2 c-0.8-3.6-2.8-6.9-5.4-9.3c0.4-2.5,1.3-4.8,2.7-6.9c2-2.9,3.2-6.5,3.2-10.4c0-10.2-8.2-18.4-18.4-18.4c-0.3,0-0.6,0-0.9,0 C39.7,9,32,16.8,31.6,26.2c-0.2,4.1,1,7.9,3.2,11c1.4,2.1,2.3,4.5,2.7,6.9c-2.6,2.5-4.6,5.7-5.4,9.3c-1.9,0.7-4,1.1-6.1,1.1 c-0.4,0-0.8,0-1.2,0c-0.5,0-0.9-0.1-1.4-0.1c-3.1,0-6.3,0.8-9.2,2.5c-9.1,5.2-12,17-6.3,25.9c3.5,5.4,9.5,8.4,15.6,8.4 c2.9,0,5.8-0.7,8.5-2.1c3.6-1.9,6.3-4.9,8-8.3c1.1-2.3,2.7-4.2,4.6-5.8c1.7,0.5,3.5,0.8,5.4,0.8c1.9,0,3.7-0.3,5.4-0.8 c1.9,1.6,3.5,3.5,4.6,5.7c1.5,3.2,4,6,7.4,8c2.9,1.7,6.1,2.5,9.2,2.5c6.6,0,13.1-3.6,16.4-10C97.3,73.1,94.4,62.5,86.5,57.5z M29.6,83.7c-1.9,1.1-4,1.6-6.1,1.6c-4.2,0-8.4-2.2-10.6-6.1c-3.4-5.9-1.4-13.4,4.5-16.8c1.9-1.1,4-1.6,6.1-1.6 c4.2,0,8.4,2.2,10.6,6.1C37.5,72.8,35.4,80.3,29.6,83.7z M50,39.3c-6.8,0-12.3-5.5-12.3-12.3S43.2,14.7,50,14.7 c6.8,0,12.3,5.5,12.3,12.3S56.8,39.3,50,39.3z M87.2,79.2c-2.3,3.9-6.4,6.1-10.6,6.1c-2.1,0-4.2-0.5-6.1-1.6 c-5.9-3.4-7.9-10.9-4.5-16.8c2.3-3.9,6.4-6.1,10.6-6.1c2.1,0,4.2,0.5,6.1,1.6C88.6,65.8,90.6,73.3,87.2,79.2z"
                            ></path>
                          </g>
                        </g>
                      </g>
                      <animateTransform
                        attributeName="transform"
                        type="rotate"
                        repeatCount="indefinite"
                        dur="1s"
                        keyTimes="0;1"
                        values="0 50 50;360 50 50"
                      ></animateTransform>
                    </g>
                  </svg>
                </template>
                <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="-----------我是有底线的-----------"
                  @load="getArticle"
                  :immediate-check="false"
                >
                  <template #loading>
                    <div style="text-align: center; padding: 10px">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        style="
                          margin: auto;
                          background: rgba(255, 255, 255, 0);
                          display: block;
                        "
                        width="110px"
                        height="110px"
                        viewBox="0 0 100 100"
                        preserveAspectRatio="xMidYMid"
                      >
                        <circle cx="75" cy="50" fill="#f68084" r="5">
                          <animate
                            attributeName="r"
                            values="3;3;5;3;3"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            repeatCount="indefinite"
                            begin="-0.9230769230769231s"
                          ></animate>
                          <animate
                            attributeName="fill"
                            values="#f68084;#f68084;#a6c0fe;#f68084;#f68084"
                            repeatCount="indefinite"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            begin="-0.9230769230769231s"
                          ></animate>
                        </circle>
                        <circle
                          cx="72.13640064133025"
                          cy="61.61807930109421"
                          fill="#f68084"
                          r="5"
                        >
                          <animate
                            attributeName="r"
                            values="3;3;5;3;3"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            repeatCount="indefinite"
                            begin="-0.8461538461538461s"
                          ></animate>
                          <animate
                            attributeName="fill"
                            values="#f68084;#f68084;#a6c0fe;#f68084;#f68084"
                            repeatCount="indefinite"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            begin="-0.8461538461538461s"
                          ></animate>
                        </circle>
                        <circle
                          cx="64.2016186682789"
                          cy="70.57459664734141"
                          fill="#f68084"
                          r="5"
                        >
                          <animate
                            attributeName="r"
                            values="3;3;5;3;3"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            repeatCount="indefinite"
                            begin="-0.7692307692307693s"
                          ></animate>
                          <animate
                            attributeName="fill"
                            values="#f68084;#f68084;#a6c0fe;#f68084;#f68084"
                            repeatCount="indefinite"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            begin="-0.7692307692307693s"
                          ></animate>
                        </circle>
                        <circle
                          cx="53.01341700638307"
                          cy="74.81772185245134"
                          fill="#f68084"
                          r="5"
                        >
                          <animate
                            attributeName="r"
                            values="3;3;5;3;3"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            repeatCount="indefinite"
                            begin="-0.6923076923076923s"
                          ></animate>
                          <animate
                            attributeName="fill"
                            values="#f68084;#f68084;#a6c0fe;#f68084;#f68084"
                            repeatCount="indefinite"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            begin="-0.6923076923076923s"
                          ></animate>
                        </circle>
                        <circle
                          cx="41.13487782393661"
                          cy="73.37540606713537"
                          fill="#f68084"
                          r="5"
                        >
                          <animate
                            attributeName="r"
                            values="3;3;5;3;3"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            repeatCount="indefinite"
                            begin="-0.6153846153846154s"
                          ></animate>
                          <animate
                            attributeName="fill"
                            values="#f68084;#f68084;#a6c0fe;#f68084;#f68084"
                            repeatCount="indefinite"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            begin="-0.6153846153846154s"
                          ></animate>
                        </circle>
                        <circle
                          cx="31.28723129572247"
                          cy="66.57806645601988"
                          fill="#f68084"
                          r="5"
                        >
                          <animate
                            attributeName="r"
                            values="3;3;5;3;3"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            repeatCount="indefinite"
                            begin="-0.5384615384615384s"
                          ></animate>
                          <animate
                            attributeName="fill"
                            values="#f68084;#f68084;#a6c0fe;#f68084;#f68084"
                            repeatCount="indefinite"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            begin="-0.5384615384615384s"
                          ></animate>
                        </circle>
                        <circle
                          cx="25.7264545643487"
                          cy="55.98289160718894"
                          fill="#f68084"
                          r="5"
                        >
                          <animate
                            attributeName="r"
                            values="3;3;5;3;3"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            repeatCount="indefinite"
                            begin="-0.46153846153846156s"
                          ></animate>
                          <animate
                            attributeName="fill"
                            values="#f68084;#f68084;#a6c0fe;#f68084;#f68084"
                            repeatCount="indefinite"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            begin="-0.46153846153846156s"
                          ></animate>
                        </circle>
                        <circle
                          cx="25.726454564348696"
                          cy="44.01710839281107"
                          fill="#f68084"
                          r="5"
                        >
                          <animate
                            attributeName="r"
                            values="3;3;5;3;3"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            repeatCount="indefinite"
                            begin="-0.38461538461538464s"
                          ></animate>
                          <animate
                            attributeName="fill"
                            values="#f68084;#f68084;#a6c0fe;#f68084;#f68084"
                            repeatCount="indefinite"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            begin="-0.38461538461538464s"
                          ></animate>
                        </circle>
                        <circle
                          cx="31.287231295722467"
                          cy="33.421933543980124"
                          fill="#f68084"
                          r="5"
                        >
                          <animate
                            attributeName="r"
                            values="3;3;5;3;3"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            repeatCount="indefinite"
                            begin="-0.3076923076923077s"
                          ></animate>
                          <animate
                            attributeName="fill"
                            values="#f68084;#f68084;#a6c0fe;#f68084;#f68084"
                            repeatCount="indefinite"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            begin="-0.3076923076923077s"
                          ></animate>
                        </circle>
                        <circle
                          cx="41.134877823936606"
                          cy="26.62459393286463"
                          fill="#f68084"
                          r="5"
                        >
                          <animate
                            attributeName="r"
                            values="3;3;5;3;3"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            repeatCount="indefinite"
                            begin="-0.23076923076923078s"
                          ></animate>
                          <animate
                            attributeName="fill"
                            values="#f68084;#f68084;#a6c0fe;#f68084;#f68084"
                            repeatCount="indefinite"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            begin="-0.23076923076923078s"
                          ></animate>
                        </circle>
                        <circle
                          cx="53.01341700638308"
                          cy="25.18227814754865"
                          fill="#f68084"
                          r="5"
                        >
                          <animate
                            attributeName="r"
                            values="3;3;5;3;3"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            repeatCount="indefinite"
                            begin="-0.15384615384615385s"
                          ></animate>
                          <animate
                            attributeName="fill"
                            values="#f68084;#f68084;#a6c0fe;#f68084;#f68084"
                            repeatCount="indefinite"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            begin="-0.15384615384615385s"
                          ></animate>
                        </circle>
                        <circle
                          cx="64.20161866827887"
                          cy="29.425403352658574"
                          fill="#f68084"
                          r="5"
                        >
                          <animate
                            attributeName="r"
                            values="3;3;5;3;3"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            repeatCount="indefinite"
                            begin="-0.07692307692307693s"
                          ></animate>
                          <animate
                            attributeName="fill"
                            values="#f68084;#f68084;#a6c0fe;#f68084;#f68084"
                            repeatCount="indefinite"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            begin="-0.07692307692307693s"
                          ></animate>
                        </circle>
                        <circle
                          cx="72.13640064133025"
                          cy="38.38192069890579"
                          fill="#f68084"
                          r="5"
                        >
                          <animate
                            attributeName="r"
                            values="3;3;5;3;3"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            repeatCount="indefinite"
                            begin="0s"
                          ></animate>
                          <animate
                            attributeName="fill"
                            values="#f68084;#f68084;#a6c0fe;#f68084;#f68084"
                            repeatCount="indefinite"
                            times="0;0.1;0.2;0.3;1"
                            dur="1s"
                            begin="0s"
                          ></animate>
                        </circle>
                      </svg>
                    </div>
                  </template>
                  <!-- <router-link
                    style="margin-top: 10px 0"
                    class="main-content"
                    :to="{
                      name: 'details',
                      query: { cate_id: item._id, author_id: item.author_id },
                    }"
                    v-for="item in articleList"
                    :key="item._id"
                  > -->
                  <li
                    style="margin-top: 10px 0"
                    class="main-content"
                    @click="
                      $router.push({
                        path: '/article',
                        query: { id: item._id, title: item.title },
                      })
                    "
                    v-for="item in articleList"
                    :key="item._id"
                  >
                    <div :class="{ column: item.poster_type == 2 }">
                      <span class="contentTitle"> {{ item.title }} </span>
                      <div
                        class="imgBox"
                        :class="{
                          none: item.poster_type == 1,
                          articlesingleImg: item.poster_type == 2,
                          articltwoImg: item.poster_type == 3,
                        }"
                      >
                        <van-image
                          width="100"
                          height="100"
                          v-for="img in item.imageSrc"
                          lazy-load
                          :src="img"
                          :key="img._id"
                          fit="cover"
                        />
                        <!-- <img
                        
                        :src="item.imageSrc"
                        v-for="img in item.imageSrc"
                        :key="img._id"
                        @error="defImg"
                      /> -->
                      </div>
                    </div>
                    <div class="footer">
                      <em>{{ item.author }}</em>
                      <em>
                        评论
                        {{ item.comment }}
                      </em>
                      <em>
                        {{ item.time | conversion }}
                      </em>
                    </div>
                  </li>
                  <!-- </router-link> -->
                </van-list>
              </van-pull-refresh>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs, Tabbar, TabbarItem, List, PullRefresh } from "vant";
import { getCateList, getArticleLsit } from "@/api/home.js";
export default {
  name: "HomeView",
  data() {
    return {
      value: "",
      List: [],
      active: 0,
      Article: [],
      defaultImg: require("@/assets/banner.jpg"),
      loading: false, //是否正在加载
      finished: false, //是否全部加载完毕
      articleList: [], //文章列表

      shio: 0, //从skip开始拿
      limit: 20, //一次拿多少条

      refreshing: false, //是否正在刷新
    };
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [TabbarItem.name]: TabbarItem,
    [Tabbar.name]: Tabbar,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
  },

  created() {
    // this.getList();
    this.getCate();
  },
  computed: {
    cate_id() {
      let active_cate = this.List[this.active];
      if (!active_cate) return ""; //如果没有分类的话返回一个空
      console.log(active_cate);
      return active_cate._id;
    },
  },
  methods: {
    //  第二种方法 切换分类
    switchTab() {
      console.log(this.active); //分类列表的下标
      this.articleList = [];
      this.skip = 0;
      this.finished = false;
      console.log(this.articleList);
      this.getArticle();
    },

    // 请求分类
    // getList() {
    //   this.$http.post("/api/get_cate_list").then((res) => {
    //     if (res.code === 0) {
    //       this.List = res.data;
    //       console.log(res.data);
    //       this.getArticle(this.List[0]._id);
    //     }
    //   });
    // },

    // 第二种方法请求分类
    getCate() {
      getCateList().then((res) => {
        console.log(res);
        this.List = res.data;
        this.getArticle();
      });
    },
    // 请求文章
    // getArticle(i) {
    //   this.$http
    //     .post("/api/get_article_list", {
    //       cate_id: i,
    //       skip: 0,
    //       limit: 15,
    //     })
    //     .then((res) => {
    //       if (res.code == 0) {
    //         this.Article = res.data;
    //         console.log(res.data);
    //       }
    //     });
    // },

    // 第二种方法  请求文章
    getArticle(flag) {
      let { cate_id, skip, limit } = this;
      console.log("触发了上拉加载");

      getArticleLsit({
        cate_id,
        skip,
        limit,
      }).then((res) => {
        // 每次拿到数据都 赋值给Article
        // 因该是 累加的操作 数据应该是越来越多

        // 每次请求完做个判断  是否全部加载完毕了 如果加载完毕了 this.finished 改成true
        // 如果没完毕把loading改为false

        

        if (res.data) {
          res.data=res.data.map(v=>{
            v.imageSrc=v.imageSrc.map(v=>{
              return v+'?imageView2/1/w/200/h/200'
            })
            return v
          })
        }
        if (flag) {
          //是刷新
          this.refreshing = false;
          this.articleList = res.data; //如果是刷新把数据替换
        } else {
          this.articleList.push(...res.data); //如果是加载把数据追加
        }

        let len = this.articleList.length;
        let count = res.count;

        if (len >= count) {
          this.finished = true;
        } else {
          this.loading = false;
          this.skip = len;
        }
      });
    },

    // 切换
    // refresh(i) {
    //   this.getArticle(this.List[i]._id);
    //   console.log(this.List[i]._id);
    // },

    defImg() {
      let img = event.srcElement;
      img.src = this.defaultImg;
      img.onerror = null;
    },

    // 点击跳转文章详情
    detail() {
      // this.$router.push({name:'details',params: {article_id:this.List[i]._id}})
      // console.log(this.this.List[i]._id);
    },

    onRefresh() {
      this.skip = 0;
      this.finished = false;

      // 通过一个参数 告诉getArticle  我们是执行的刷新动作还是加载动作
      this.getArticle(true); //数据拿到以后再结束刷新的动作
    },
  },
  filters: {
    //3.定义一个处理函数，参数value为要处理数据
    conversion: function (value) {
      //调用Date的方法，处理时间戳
      return new Date(value).toLocaleString();
    },
  },
};
</script>
<style lang="scss" lang="less" scoped>
.home {
  background-color: #fff;
  padding-top: 46px;

  .top-box {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    .top {
      background-color: @baseColor;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;

      .title {
        text-align: center;
        width: 280px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50px;
        padding: 8px;
        color: #fff;
      }
    }
  }
}

.main {
  // margin-top: 46px;
  .main-content {
    width: 100%;
    .contentTitle {
      font-size: 1.2rem;
      font-weight: 500;
    }
  }
  .article {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 15px;
    a {
      display: block;
      margin-top: 10px;
      width: 345px;
      color: #000;
      span {
        width: 80%;
      }
    }
    .none {
      display: block;
    }
    //一张图片
    .articlesingleImg {
      display: flex;
      justify-content: center;
    }
    // 两张图片
    .articltwoImg {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
    // .articlemoreImg {
    //   display: flex;
    //   justify-content: space-evenly;
    //   align-items: center;
    // }
    // img {
    //   width: 100%;

    // }
    em {
      font-style: normal;
      color: #ccc;
      font-size: 14px;
    }
  }
}

.column {
  display: flex;
  justify-content: space-between;
}
// 没有图片

::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
  padding-right: 0;
  padding-left: 0;
}
::v-deep .van-tabs__wrap--scrollable .van-tab {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
::v-deep .van-tabs__line {
  position: absolute;
  bottom: 20px;
  left: 0;
  z-index: 1;
  width: 20px;
  height: 3px;
  background-color: @baseColor;
  border-radius: 3px;
}
</style>
